<template>
	<view>
		<view class="m_header_top">
			<my-top :title="title" bgcolor='#FE94C0' :isline="true"></my-top>
		</view>
		<view class="memberdetails ">
			<view class="request" v-if="toshare">
				<text>邀请TA关注宝宝的日程,一起记录,分享宝宝成长</text>
			</view>
			<view class="content">
				<view class="itembox" @click="changerole(item)" v-for="(item,index) in rolelist" :key='index'>
					<text class="borders" :class="item.type == sharedata.regulateId?'checkborders':''"></text>
					<text class="title">{{item.name}}</text>
					<text class="distraction">{{item.distraction}}</text>
				</view>
			</view>
			<view class="delmember">
				<view class="share mr-2" @click="wxserve">
					<image src="../../../../static/img/weixin.png" mode="widthFix"></image>
					<text>微信邀请</text>
				</view>
				<view class="share" @click="sharecode">
					<image src="../../../../static/img/erweima.png" mode="widthFix"></image>
					<text>面对面邀请</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '王小五的日程详情',
				toshare:true,
				sharedata:{
					childId:'',
					regulateId:2,
				},
				rolelist: [
					// {
					// 	name: '管理员',
					// 	type: 1,
					// 	check: false,
					// 	distraction: '我是管理员',
					// },
					{
						name: '编辑者',
						type: 2,
						check: false,
						distraction: '我是编辑者',
					},
					{
						name: '订阅者',
						type: 3,
						check: false,
						distraction: '我是订阅者',
					}
				]
			};
		},
		onLoad(e) {
			if(e.id){
				this.sharedata.childId= e.id;
			}
		},
		methods: {
			wxserve(){
				// #ifdef APP-PLUS
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 2,
						imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
						success: function (res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function (err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				// #endif
			},
			sharecode(){
				uni.navigateTo({
					url:'../imagecode/imagecode?data='+ JSON.stringify(this.sharedata) 
				})
			},
			changerole(item) {
				this.sharedata.regulateId = item.type;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.memberdetails {
		display: flex;
		flex-flow: column wrap;
		padding: 32rpx 16rpx;
		width: 750rpx;
		background: #FFFFFF;
		opacity: 1;
		height: 100%;
		.request{
			// width: 583rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 42rpx;
			color: #707070;
			opacity: 1;
			margin-bottom: 50rpx;
		}
		.top {
			display: flex;
		}

		.headerimg {
			border-radius: 50%;
			width: 100rpx;
			height: 100rpx;
			background: #6BDFA4;
			opacity: 1;
			margin-right: 24rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.title {
			display: flex;
			flex-direction: column;

			.name {
				// width: 96rpx;
				height: 45rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 42rpx;
				color: #121212;
				opacity: 1;

			}

			.distraction {
				// width: 295rpx;
				height: 33rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 42rpx;
				color: #707070;
				opacity: 1;

			}
		}

		.content {
			margin-top: 20rpx;
			width: 720rpx;
			height: 262rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 10rpx;
			padding: 0 16rpx;
			box-sizing: border-box;

			.itembox {
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				border-bottom: 1rpx solid rgba(0, 0, 0, .2);

				.borders {
					width: 19rpx;
					height: 19rpx;
					border: 2rpx solid #5555ff;
					border-radius: 50%;
					opacity: 1;
					margin-right: 16rpx;
				}

				.checkborders {
					border: 2rpx solid #5555ff;
					background-color: #5555ff;
				}

				.title {
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 42rpx;
					color: #626262;
					opacity: 1;
					margin-right: 16rpx;
				}

				.distraction {
					height: 33rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 42rpx;
					color: #707070;
					opacity: 1;

				}
			}

			.itembox:last-child {
				border-bottom: none
			}

		}

		.delmember {
			margin-top: 32rpx;
			width: 720rpx;
			display: flex;
			justify-content: center;
			height: 80rpx;
			background: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
			opacity: 1;
			color: rgba(255, 109, 86, 1);
			border-radius: 10rpx;
			.share{
				width: 300rpx;
				height: 80rpx;
				background: #6BDFA4;
				opacity: 1;
				border-radius: 10rpx;
				display:flex;
				align-items: center;
				justify-content: center;
				image{
					width: 40rpx;
					height: 40rpx;
				}
				text{
					margin-left: 10rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					opacity: 1;

				}
			}
			.mr-2{
				margin-right: 32rpx;
			}
		}
	}
</style>
